<template>
  <div class="login">
    <video
      class="video"
      src="../../assets/142c9d1dc88f40db8c6a14b8897fef7f.mp4"
      autoplay="autoplay"
      loop="loop"
      muted="muted"
    ></video>

    <div class="box">
      <div class="icon" @click="changeIconFn">
        <i
          :class="{
            'el-icon-mobile-phone': !changeIcon,
            'el-icon-s-platform': changeIcon,
          }"
        ></i>
      </div>
      <!-- 二维码登录 -->
      <template v-if="state3">
        <h2>二维码登录</h2>
        <div class="erweima">此处是二维码</div>
        <h6>请用手机微信扫码登录</h6>
      </template>

      <!-- 短信登录 -->
      <template v-if="state2">
        <h2>短信登录</h2>
        <el-form
          :model="ruleForm2"
          status-icon
          :rules="rules2"
          ref="ruleForm2"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="手机号" prop="mobile">
            <el-input v-model.number="ruleForm2.mobile"></el-input>
          </el-form-item>

          <el-form-item label="验证码" prop="mobilecode">
            <el-input v-model.number="ruleForm2.mobilecode"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="submitForm2('ruleForm2')">
              提交
            </el-button>
          </el-form-item>
        </el-form>

        <h6 @click="usernameFn">用户名登录</h6>
      </template>

      <!-- 用户名登录 -->
      <template v-if="state">
        <h2>用户名登录</h2>
        <el-form
          :model="ruleForm"
          status-icon
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="用户名" prop="username" class="item">
            <el-input v-model.number="ruleForm.username"></el-input>
          </el-form-item>

          <el-form-item label="密码" prop="password">
            <el-input
              type="password"
              v-model="ruleForm.password"
              autocomplete="off"
            ></el-input>
          </el-form-item>

          <el-form-item label="验证码" prop="verifycode">
            <el-input v-model.number="ruleForm.verifycode"></el-input>
            <span class="login-code" @click="refreshCode">
              <Identify :identifyCode="identifyCode"></Identify>
            </span>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">
              提交
            </el-button>
          </el-form-item>
        </el-form>

        <h6 @click="mobileFn">手机短信登录</h6>
      </template>
    </div>
  </div>
</template>

<script>
import Identify from "../../components/identity.vue";
export default {
  components: { Identify },
  data() {
    let checkName = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("请输入用户名！"));
      } else if (!/^[0-9a-zA-Z_]{3,12}$/.test(value)) {
        return callback(new Error("用户名为3-12位的数字字母下划线！"));
      } else {
        return callback();
      }
    };
    let checkVerifycode = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("请输入验证码！"));
      } else {
        return callback();
      }
    };

    let checkMobile = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("请输入手机号！"));
      } else if (!/^1\d{10}/.test(value)) {
        return callback(new Error("验证码必须是11位！"));
      } else {
        return callback();
      }
    };
    return {
      identifyCodes: "1234567890abcdefjhijklinopqrsduvwxyz",
      identifyCode: "",
      code: this.$route.query.code,

      state: true,
      state2: false,
      state3: false,
      changeIcon: true,
      ruleForm: {
        username: "",
        password: "",
        verifycode: "",
      },
      ruleForm2: {
        mobile: "",
        mobilecode: "",
      },
      rules: {
        username: [
          {
            validator: checkName,
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入密码！", trigger: "blur" },
          { min: 3, message: "密码长度不小于3个字符！", trigger: "blur" },
        ],
        verifycode: [
          {
            validator: checkVerifycode,
            trigger: "blur",
          },
        ],
      },
      rules2: {
        mobile: [
          {
            validator: checkMobile,
            trigger: "blur",
          },
        ],
        mobilecode: [
          { required: true, message: "请输入验证码！", trigger: "blur" },
          { min: 5, message: "验证码长度为5个字符！", trigger: "blur" },
        ],
      },
    };
  },

  mounted() {
    // 初始化验证码
    this.identifyCode = "";
    this.makeCode(this.identifyCodes, 4);
    localStorage.setItem("code", this.identifyCode);
    console.log("this.code", this.identifyCode);
  },

  methods: {
    //刷新验证码
    refreshCode() {
      this.identifyCode = "";
      this.makeCode(this.identifyCodes, 4);
    },
    //生成验证上的随机数，验证码中的数从identifyCodes中取，
    makeCode(o, l) {
      for (let i = 0; i < l; i++) {
        this.identifyCode +=
          this.identifyCodes[this.randomNum(0, this.identifyCodes.length)];
      }
      console.log(" this.identifyCode", this.identifyCode);
    },
    //生成随机数,这里是生成
    //Math.random()方法返回大于等于0小于1的一个随机数
    //随机数 = Math.floor(Math.random() * 可能的总数 + 第一个可能的值)
    randomNum(min, max) {
      return Math.floor(Math.random() * (max - min) + min);
    },

    changeIconFn() {
      this.changeIcon = !this.changeIcon;
      // this.state = !this.state;
      // this.state3 = !this.state3;
      if (!this.changeIcon) {
        this.state = false;
        this.state2 = false;
        this.state3 = true;
      } else {
        this.state = true;
        this.state2 = false;
        this.state3 = false;
      }
    },

    mobileFn() {
      (this.state = !this.state), (this.state2 = !this.state2);
    },
    usernameFn() {
      (this.state = !this.state), (this.state2 = !this.state2);
    },

    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    submitForm2(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

<style lang="scss">
.login {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;

  .video {
    // width: 100%;
    height: 120%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
  }
  .box {
    width: 360px;
    height: 520px;
    background-color: rgba($color: #2d476e, $alpha: 0.6);
    position: fixed;
    right: 100px;
    top: 120px;
    z-index: 99;

    .icon {
      i {
        font-size: 40px;
        float: right;
        color: #ccc;
        cursor: pointer;
      }
    }

    .erweima {
      width: 200px;
      height: 200px;
      border: 2px solid #ccc;
      margin: 0 auto;
    }
    h2,
    h6 {
      color: wheat;
      text-align: center;
      margin: 60px 0 60px;
    }
    .demo-ruleForm {
      margin-right: 40px;

      label.el-form-item__label {
        color: wheat;
      }
      .login-code {
        position: absolute;
        left: 100px;
        top: 5px;
      }
      .el-button {
        width: 220px;
      }
    }
  }
}
</style>
